<template>
  <a-drawer
    :title="i18n('list.leaveMsg','留言')"
    placement="right"
    @close="onLeaveMsgClose"
    width="480"
    :open="msgShow"
    :z-index="20000"
    >
      <!--  数据空   -->
      <div class="BpmInstMsgs">
          <a-empty v-if="leaveMsges.length==0" />
          <div class="BpmInstMsgs-common">
              <div class="BpmInstMsgs-common-list" v-for="msg in leaveMsges" :key="msg.id">
                  <div class="BpmInstMsgs-list-img"><img src="@/assets/img/portrait.png"/></div>
                  <div class="BpmInstMsgs-list-Leave">
                      <div><span>{{msg.author}}</span><span class="BpmInstMsgs-list-time">{{msg.createTime}}</span></div>
                      <div class="BpmInstMsgs-list-name">{{msg.content}}</div>
                  </div>
              </div>
          </div>
          <div class="BpmInstMsgs-bottom">
              <div style="flex: 1;margin-right: 5px"><a-textarea auto-size  v-model:value="leaveMsg" @pressEnter="enterLeaveMsg"></a-textarea></div>
              <div style="width: 90px"><a-button  :loading="msgSubmitting" @click="enterLeaveMsg" type="primary">   {{i18n('list.addMsg','添加留言')}}  </a-button></div>
          </div>
      </div>
  <div>
  </div>
  </a-drawer>
</template>

<script>
    import BpmInstMsgApi from "@/common/api/bpm/bpmInstMsg";
    export default {
        name: "BpmInstMsgs",
        emits:['update:msgShow'],
        props:{
          instId:{//流程实例Id
            type:String,
            required:true
          },
            msgShow:{
                type:Boolean,
                default:false
            }
        },
        data(){
          return {
            leaveMsges:[],
            leaveMsg:'',
            msgSubmitting:false,
          }
        },
      methods:{
          i18n(name,text,key){
              return this.$ti18(name,text,"bpmInst",key);
          },
          enterLeaveMsg(){
            this.msgSubmitting=true;
            //发送至后台实现数据保存
            BpmInstMsgApi.addMsg(this.instId,this.leaveMsg).then(resp=>{
                this.msgSubmitting=false;
                if(!resp.success){
                    this.$message.warn(resp.message);
                    return;
                }
              this.leaveMsges.push(resp.data);
              this.leaveMsg='';

            });
          },
          //加载内部消息
          loadInstMsg(){
            let _self=this;
            BpmInstMsgApi.getByInstId(this.instId).then(data=>{
              _self.leaveMsges=data;
            });
          },
          onLeaveMsgClose(){
              this.$emit('update:msgShow', false)
          }
      },
        watch:{
            msgShow:function (val) {
                if(val){
                    this.loadInstMsg();
                }
            }
        }

    }
</script>

<style scoped>
.BpmInstMsgs{
    display: flex;
    height: 100%;
    flex-direction: column;
}
.BpmInstMsgs-common{
    flex: 1;
    overflow: auto;
}
.BpmInstMsgs-common-list{
    background: #F8F8F8;
    padding: 10px;
    border-radius: 4px 4px 4px 4px;
    display: flex;
    margin-bottom:10px;
}
.BpmInstMsgs-list-img img{
    height: 34px;
    width: 34px;
    border-radius: 50%;
}
.BpmInstMsgs-list-Leave{
    margin-left: 10px;
    width: 350px;
}
.BpmInstMsgs-list-time{
    margin-left: 30px;
    color: #909090;
}
.BpmInstMsgs-bottom{
    display: flex;

}
.BpmInstMsgs-list-name{
    margin-top: 10px;
    word-wrap: break-word;
}
</style>